const body = document.querySelector('body')
const sidebar = body.querySelector('nav')
const container = body.querySelector('section')
const toggle = body.querySelector('.toggle')
const searchBtn = body.querySelector('.search-box')
const modeSwitch = body.querySelector('.toggle-switch')
const modeText = body.querySelector('.mode-text')


toggle.addEventListener('click', () => {
    sidebar.classList.toggle('close')
})
searchBtn.addEventListener('click', () => {
    sidebar.classList.remove('close')
})
modeSwitch.addEventListener('click', () => {
    body.classList.toggle('dark');
    if (body.classList.contains('dark')) {
        modeText.innerText = "夜间模式"
    } else {
        modeText.innerText = "白天模式"
    }
})

// 从 localStorage 中读取用户头像和昵称并显示到侧边栏
function loadUserInfo() {
    const username = localStorage.getItem('username') || '默认用户名';
    const avatar = localStorage.getItem('avatar') || 'default-avatar.png';

    document.getElementById('sidebar-username').textContent = username;
    document.getElementById('sidebar-avatar').src = avatar;
}

// 页面加载时执行
window.onload = loadUserInfo;


//输入文本部分的js
document.getElementById('submitButton').addEventListener('click', function () {
    var textInput = document.getElementById('textInput').value;
    var fileInput = document.getElementById('fileInput').files[0];

    setTimeout(function () {
        document.getElementById('textInput').value = '';
        document.getElementById('fileInput').value = '';
    }, 2000);
});

// 获取必要的 DOM 元素
const textInput = document.getElementById("textInput");
const fileInput = document.getElementById("fileInput");
const submitButton = document.getElementById("submitButton");
const tipbox = document.getElementById("tipbox");

// 监听提交按钮的点击事件,隐藏提示框
    submitButton.addEventListener("click", function() {
        // 隐藏tipbox
        tipbox.style.display = "none";
    });


// 在文本框或文件输入变化时检测内容，并启用/禁用按钮
function toggleSubmitButton() {
    if (textInput.value.trim() !== "" || fileInput.files.length > 0) {
        submitButton.disabled = false;
    } else {
        submitButton.disabled = true;
    }
}

textInput.addEventListener("input", toggleSubmitButton);
fileInput.addEventListener("change", toggleSubmitButton);


// 添加文件上传监听器，将文件名称和类型显示在 textarea
document.getElementById('fileInput').addEventListener('change', function (event) {
    const file = event.target.files[0]; // 获取上传的文件
    const textarea = document.getElementById('textInput');

    if (file) {
        // 获取文件名和文件类型
        const fileName = file.name;
        const fileType = file.type;

        // 根据文件类型选择图标
        let icon;
        if (fileType.startsWith('image/')) {
            icon = '🖼️'; // 图片图标
        } else if (fileType.startsWith('application/pdf')) {
            icon = '📄'; // PDF图标
        } else if (fileType.startsWith('application/vnd.openxmlformats-officedocument.wordprocessingml.document')) {
            icon = '📄'; // Word文档图标
        } else if (fileType.startsWith('text/csv') || fileName.endsWith('.csv')) {
            icon = '📊'; // CSV文件图标
        } else {
            icon = '📁'; // 默认文件图标
        }

        // 更新文本框内容
        textarea.value = `${icon} ${fileName}`;
        
        // 允许用户继续输入
        textarea.readOnly = false; // 移除只读状态
        textarea.focus(); // 将焦点设置回文本区域

        document.getElementById('submitButton').disabled = false; // 启用提交按钮
    }
});

document.addEventListener("DOMContentLoaded", function () {
    const submitButton = document.getElementById("submitButton");   // 按钮ID
    const inputDiv = document.getElementById("inputDiv");     // 要操作的div ID
    let moveOnce = false; // 只移动一次的状态标志

    if (submitButton && inputDiv) {  // 检查是否成功获取元素
        submitButton.addEventListener("click", function () {
            // 这里可以添加其他按钮的功能
            console.log("按钮被点击，执行其他功能。");

            if (!moveOnce) { // 仅在未移动时才执行"移动到底部"的功能
                inputDiv.classList.add("move-to-bottom"); // 添加类以移动到底部
                moveOnce = true; // 更新状态标志
                console.log("内容框已移动到底部。");
            }
        });
    } else {
        console.error("找不到元素，请检查 HTML 中的 ID 是否正确。");
    }
})
document.getElementById('submitButton').addEventListener('click', function() {
    const inputText = document.getElementById('textInput').value;

    // 添加用户输入到聊天框中
    if (inputText) {
        const chatContent = document.getElementById('chatContent');

        // 创建用户消息元素
        const userMessage = document.createElement('div');
        userMessage.className = 'user-message';

        // 创建用户图标
        const userIcon = document.createElement('div');
        userIcon.className = 'circle-icon';
        // userIcon.textContent = '用户';

        // 设置样式
        userIcon.style.width = '50px'; // 设置宽度
        userIcon.style.height = '50px'; // 设置高度
        userIcon.style.borderRadius = '50%'; // 使其成为圆形
        userIcon.style.backgroundImage = 'url(static/image/avatar.jpg)'; // 替换为您的图片路径
        userIcon.style.backgroundSize = 'cover'; // 使背景图像覆盖整个元素
        userIcon.style.backgroundPosition = 'center'; // 背景图像居中
        userIcon.style.display = 'flex'; // 使用 flexbox 布局
        userIcon.style.justifyContent = 'center'; // 水平居中
        userIcon.style.alignItems = 'center'; // 垂直居中

        // 创建消息内容元素
        const messageContent = document.createElement('div');
        messageContent.className = 'message-content';
        messageContent.appendChild(document.createTextNode(inputText)); // 添加用户输入文本

        // 将消息内容和图标添加到用户消息元素中
        userMessage.appendChild(messageContent); // 用户内容在图标前面
        userMessage.appendChild(userIcon); // 将用户图标添加到消息元素中
        chatContent.appendChild(userMessage); // 添加到聊天内容中

        // 清空输入框
        document.getElementById('textInput').value = '';

        // 显示聊天框
        document.getElementById('chatbox').style.display = 'block';

        // 添加系统回复内容
        const systemMessage = document.createElement('div');
        systemMessage.className = 'system-message';

        // 创建系统图标
        const systemIcon = document.createElement('div');
        systemIcon.className = 'circle-icon';
        systemIcon.textContent = 'sys';

        // 创建系统消息内容元素
        const systemMessageContent = document.createElement('div');
        systemMessageContent.className = 'message-content';
        systemMessageContent.id = 'systemMessageContent';

        // 创建详细文本内容
        const systemText = document.createElement('p');
        systemText.textContent = '基于以上评论数据，可以总结出以下分析与建议：';
        systemText.style.textAlign = 'left'; // 确保文本左对齐
        systemText.style.margin = '10px 0'; // 设置上下间距
        systemText.style.color = '#000000'; // 设置文本颜色
        systemText.style.fontSize = '20px'; // 设置行高

        // 添加文本内容
        systemMessageContent.appendChild(systemText);

        // 将系统消息内容和图标添加到系统消息元素中
        systemMessage.appendChild(systemIcon);
        systemMessage.appendChild(systemMessageContent);
        chatContent.appendChild(systemMessage);

        // 创建多张图片及其描述
        const systemImages = [
            { src: "static/user_data/result/aspect_frequency.png", alt: "方面词" },
            { src: "static/user_data/result/final_sentiment_distribution.png", alt: "情感类别" },
            { src: "static/user_data/result/sentiment_word_frequency.png", alt: "情感词" },
        ];

        // 准备文本内容
        const textContent = `
        <br>
        <h2> 对教授这门课程的老师的分析与建议</h2>
            <p>这些评论反映出学生对课程内容和教学方式的多方面感受，包括对教学细节的赞赏和对一些教学安排的批评。以下是从老师角度出发的分析和建议：</p>
            <ol>
                <li><b>课程内容的全面性和系统性</b></li>
                   <p>很多学生称赞课程系统全面，这表明课程内容在知识覆盖面和深度上取得了较好的平衡。但有些学生提到部分内容稍显复杂（尤其对非专业背景的学生）。</p>
                   <p><b>建议:</b>老师可以考虑在课程内容中增加浅显的举例和更通俗的表达，尤其在初期阶段，帮助新手更好地适应课程。</p>
                <li><b>授课风格与互动性</b></li>
                   <p>一些学生对"老师读PPT"的教学方式感到不满，并认为缺少互动性。另一方面，也有学生称赞老师的详细讲解和实时答疑。</p>
                   <p><b>建议:</b>老师可以在讲解过程中加入互动式提问，或通过案例分析和讨论来增加课程的趣味性和参与感。另外，利用直播或讨论区答疑，增加实时互动，有助于提升学生的积极性。</p>
                <li><b>作业与测试设置</b></li>
                   <p>一些学生认为课程的练习设置过于简单，考试却难度较高，形成不匹配的体验。</p>
                   <p><b>建议:</b>在作业和测试环节，建议增加一些难度渐进的练习，使学生能逐步适应考试的难度。也可以考虑在作业中加入开放性的问题，鼓励学生运用所学知识解决实际问题。</p>
                <li><b>课程资源的使用</b></li>
                   <p>学生对PPT、视频设计、页面设计等多方面的评价较为积极，但也有少数提到页面设计较复杂、指定邮箱不方便等问题。</p>
                   <p><b>建议:</b>可以在课程资源方面精简PPT内容，让重点更突出。此外，优化页面设计和便捷性，减少不必要的步骤，尤其是在课程的邮箱注册和登录等环节，提供常用邮箱的选项。</p>
           </ol>
            <br>
        
           <h2>对有意向上该课程的学生的推荐与分析</h2>
              <p>从学生的评论来看，这门课内容丰富，适合对该领域知识感兴趣且有一定学习意愿的学生。以下是针对学生的分析和建议：</p>
           <ol>
                <li><b>系统性与全面性</b></li>
                   <p>这门课程涵盖了从基础到深入的系统知识，非常适合希望在该领域获得系统理解的学生。课程的全面性对于基础较弱的学生可能有一定难度。</p>
                   <p><b>推荐:</b>如果你是对该领域感兴趣的新手，可以从基础章节入手，并利用每章提供的测试题逐步巩固知识。对于有一定基础的学生，课程的广度和深度能够满足进一步学习的需求。</p>
                <li><b>互动学习机会</b></li>
                   <p>课程提供了多种学习互动形式，包括老师的答疑解惑、学生互评作业等，这些都有助于提升学习效果和参与感。</p>
                   <p><b>建议:</b>学生可以积极参与作业互评环节，这不仅能够加深对知识的理解，还能通过其他同学的视角获得新的启发。此外，利用课程的互动渠道（如答疑直播）也是不错的学习策略。</p>
                <li><b>课程安排与难度平衡:</b></li>
                   <P>部分学生认为课程章节较多，内容稍显难度，尤其是在第二章等较深的章节。</P>
                   <p><b>建议:</b>学生可以在学习过程中根据个人进度分阶段学习，确保理解每个章节的内容再继续前进。同时，可以利用预习和复习帮助自己更好地掌握知识点。</p>
                <li><b>课程实用性</b></li>
                   <p>许多评论指出课程内容实用，并涵盖了多种实际应用场景（如临床案例、中医知识等）。对于希望将知识应用于生活实际的学生，这门课会是非常有价值的选择。</p>
                   <p><b>推荐:</b>如果你对实用技能感兴趣，可以重点关注课程中的案例和应用部分，这些内容能够为你的日常生活和职业技能带来帮助。</p>
           </ol>
            <br>
           <h2>侧重点总结</h2>
              <ul>
                  <li>对老师的建议侧重点：提升教学的互动性、合理分配练习与测试的难度、优化资源设计与页面便捷性。</li>
                  <li>对学生的推荐侧重点：注重系统性学习和知识巩固，积极参与互动环节，分阶段进行难度适配的学习，并重视课程的实用性。</li>
              </ul>
        `;

        // 实现图片一张一张显示的逻辑
        let imageIndex = 0;
        let textIndex = 0;
        const textContentArray = textContent.split('');
        
        // 创建一个容器用于保存流式文本
        const textContainer = document.createElement('div');
        textContainer.id = 'textFlowContainer';
        // 设置文本容器样式 - 黑色字体和左对齐
        textContainer.style.color = '#000000';
        textContainer.style.textAlign = 'left';
        textContainer.style.width = '100%';
        textContainer.style.fontSize = '16px';
        textContainer.style.lineHeight = '1.5';
        systemMessageContent.appendChild(textContainer);
        
        // 显示第一张图片和其描述
        function showNextImage() {
            if (imageIndex < systemImages.length) {
                // 创建加载动画容器
                const loadingContainer = document.createElement('div');
                loadingContainer.className = 'loading-container';
                loadingContainer.style.width = '100%';
                loadingContainer.style.height = '200px';
                loadingContainer.style.display = 'flex';
                loadingContainer.style.justifyContent = 'center';
                loadingContainer.style.alignItems = 'center';
                loadingContainer.style.backgroundColor = '#f5f5f5';
                loadingContainer.style.borderRadius = '8px';
                loadingContainer.style.margin = '10px 0';
                
                // 创建加载动画
                const loadingSpinner = document.createElement('div');
                loadingSpinner.className = 'loading-spinner';
                loadingSpinner.style.width = '50px';
                loadingSpinner.style.height = '50px';
                loadingSpinner.style.border = '5px solid rgba(0, 0, 0, 0.1)';
                loadingSpinner.style.borderTopColor = '#3498db';
                loadingSpinner.style.borderRadius = '50%';
                loadingSpinner.style.animation = 'spin 1s linear infinite';
                
                // 添加动画样式
                if (!document.getElementById('loading-animation-style')) {
                    const style = document.createElement('style');
                    style.id = 'loading-animation-style';
                    style.textContent = `
                        @keyframes spin {
                            0% { transform: rotate(0deg); }
                            100% { transform: rotate(360deg); }
                        }
                    `;
                    document.head.appendChild(style);
                }
                
                // 添加加载提示文本
                const loadingText = document.createElement('div');
                loadingText.textContent = `正在加载图片: ${systemImages[imageIndex].alt}`;
                loadingText.style.marginLeft = '15px';
                loadingText.style.fontWeight = 'bold';
                
                // 将加载动画添加到容器
                loadingContainer.appendChild(loadingSpinner);
                loadingContainer.appendChild(loadingText);
                
                // 将加载容器添加到消息内容中
                systemMessageContent.insertBefore(loadingContainer, textContainer);
                
                // 自动滚动到加载动画位置
                loadingContainer.scrollIntoView({ behavior: 'smooth', block: 'end' });
                
                // 延迟加载实际图片
                setTimeout(() => {
                    const imgElement = document.createElement('img');
                    imgElement.src = systemImages[imageIndex].src;
                    imgElement.alt = systemImages[imageIndex].alt;
                    imgElement.style.width = '100%';
                    imgElement.style.display = 'none'; // 先隐藏图片
                    
                    // 添加点击事件以放大图片
                    imgElement.addEventListener('click', function() {
                        modalImage.src = imgElement.src;
                        modal.style.display = 'flex';
                    });
                    
                    // 创建描述文本元素
                    const description = document.createElement('p');
                    description.textContent = systemImages[imageIndex].alt;
                    description.style.display = 'none'; // 先隐藏描述
                    
                    // 将图片和描述添加到系统消息内容中
                    systemMessageContent.insertBefore(description, textContainer);
                    systemMessageContent.insertBefore(imgElement, description);
                    
                    // 图片加载完成后显示图片，隐藏加载动画
                    imgElement.onload = function() {
                        // 移除加载动画
                        systemMessageContent.removeChild(loadingContainer);
                        
                        // 显示图片和描述
                        imgElement.style.display = 'block';
                        description.style.display = 'block';
                        
                        // 自动滚动到新加载的图片位置
                        imgElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        
                        imageIndex++;
                        
                        // 如果还有图片，设置定时器显示下一张
                        if (imageIndex < systemImages.length) {
                            setTimeout(showNextImage, 3000); // 3秒后显示下一张图片
                        } else {
                            // 所有图片显示完毕后，开始显示流式文本
                            setTimeout(showTextContent, 1000);
                        }
                    };
                }, 2000); // 显示加载动画2秒后再加载图片
            }
        }
        
        // 流式显示文本内容
        function showTextContent() {
            // 不再拆分为单个字符，而是按HTML元素分段处理
            // 将HTML文本拆分为HTML元素和纯文本部分
            const parser = new DOMParser();
            const doc = parser.parseFromString(textContent, 'text/html');
            const nodes = Array.from(doc.body.childNodes);
            
            let currentNodeIndex = 0;
            let currentTextIndex = 0;
            
            const showText = () => {
                if (currentNodeIndex >= nodes.length) {
                    return; // 所有内容已显示完毕
                }
                
                const currentNode = nodes[currentNodeIndex];
                
                // 如果是文本节点，则逐字符显示
                if (currentNode.nodeType === Node.TEXT_NODE) {
                    if (currentTextIndex < currentNode.textContent.length) {
                        // 显示文本节点的下一个字符
                        const char = currentNode.textContent.charAt(currentTextIndex);
                        const textSpan = document.createElement('span');
                        textSpan.textContent = char;
                        textSpan.style.color = '#000000'; // 确保每个字符都是黑色
                        textContainer.appendChild(textSpan);
                        currentTextIndex++;
                        
                        // 自动滚动到当前文本位置
                        textSpan.scrollIntoView({ behavior: 'smooth', block: 'end' });
                        
                        setTimeout(showText, 200);
                    } else {
                        // 当前文本节点已显示完毕，移到下一个节点
                        currentNodeIndex++;
                        currentTextIndex = 0;
                        setTimeout(showText, 300);
                    }
                } else {
                    // 如果是HTML元素，整个添加
                    const addedNode = currentNode.cloneNode(true);
                    // 为每个添加的HTML元素设置样式
                    if (addedNode.style) {
                        addedNode.style.color = '#000000';
                        addedNode.style.textAlign = 'left';
                    }
                    // 处理特殊标签的样式
                    if (addedNode.tagName === 'H2') {
                        addedNode.style.fontSize = '22px';
                        addedNode.style.fontWeight = 'bold';
                        addedNode.style.margin = '15px 0 10px 0';
                    } else if (addedNode.tagName === 'P') {
                        addedNode.style.margin = '8px 0';
                    } else if (addedNode.tagName === 'LI') {
                        addedNode.style.margin = '5px 0';
                    }
                    textContainer.appendChild(addedNode);
                    currentNodeIndex++;
                    
                    // 自动滚动到当前添加的HTML元素位置
                    addedNode.scrollIntoView({ behavior: 'smooth', block: 'end' });
                    
                    setTimeout(showText, 400);
                }
            };
            
            showText();
        }
        
        // 开始显示第一张图片
        showNextImage();
    }
});

// 创建模态框元素
const modal = document.createElement('div');
modal.className = 'modal';
document.body.appendChild(modal);

// 创建放大图片元素
const modalImage = document.createElement('img');
modal.appendChild(modalImage);

// 添加点击事件监听器以关闭模态框
modal.addEventListener('click', function() {
    modal.style.display = 'none'; // 隐藏模态框
});




// 监听"慕课获取"按钮
document.getElementById('mooc-btn').addEventListener('click', function () {
    // 隐藏原有内容
    document.getElementById('textInput').style.display = 'none';
    document.getElementById('submitButton').style.display = 'none';
    document.getElementById('fileInput').style.display = 'none';
    document.querySelector('.text').style.display = 'none'; // 隐藏 "慕课质量评价系统"
    document.querySelector('.input').style.display = 'none'; // 隐藏输入框部分
    document.querySelector('.chatbox').style.display = 'none'; // 隐藏对话框部分
    document.querySelector('.tipbox').style.display = 'none'; // 隐藏提示框部分
    // 显示新内容和输入框容器
    document.getElementById('newContent').style.display = 'block';
    document.getElementById('urlInputContainer').style.display = 'block';
});


let currentPage = 1;
let itemsPerPage = 5;

// 提交按钮逻辑：用于显示查询结果
document.getElementById("submitUrl").addEventListener("click", function () {
    const courseName = document.getElementById("CourseNameInput").value;
    const page = 1;
    const perPage = parseInt(document.getElementById("itemsPerPage").value, 10);

    fetchPage(page, perPage, courseName); // 调用 fetchPage 来渲染数据
});

document.getElementById("prevPage").addEventListener("click", function () {
    const currentPage = parseInt(document.getElementById("currentPage").textContent, 10);
    if (currentPage > 1) {
        fetchPage(currentPage - 1);
    }
});

document.getElementById("nextPage").addEventListener("click", function () {
    const currentPage = parseInt(document.getElementById("currentPage").textContent, 10);
    fetchPage(currentPage + 1);
});

document.getElementById("itemsPerPage").addEventListener("change", function () {
    fetchPage(1); // 每次更改条数时，从第 1 页重新加载
});

function renderCourseData(data) {
    if (data.success) {
        let html = `
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>课程 ID</th>
                        <th>课程名称</th>
                        <th>报名人数</th>
                        <th>教师</th>
                        <th>学校</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>${data.course.courseId}</td>
                        <td>${data.course.name}</td>
                        <td>${data.course.enrollCount}</td>
                        <td>${data.course.teacherName}</td>
                        <td>${data.course.schoolName}</td>
                    </tr>
                </tbody>
            </table>
            <h3>评论</h3>
            <table>
                <thead>
                    <tr>
                        <th>用户昵称</th>
                        <th>评论内容</th>
                        <th>评分</th>
                    </tr>
                </thead>
                <tbody>
        `;

        data.course.comments.forEach(comment => {
            html += `
            <tr>
                <td>${comment.userNickName}</td>
                <td>${comment.content}</td>
                <td>${comment.mark ? comment.mark : '无评分'}</td>
            </tr>
            `;
        });

        html += `
                </tbody>
            </table>
            <div class="pagination">
                <button onclick="fetchPage(${data.course.currentPage - 1})" ${data.course.currentPage === 1 ? 'disabled' : ''}>上一页</button>
                <span>当前页: ${data.course.currentPage} / 总页数: ${data.course.totalPages}</span>
                <button onclick="fetchPage(${data.course.currentPage + 1})" ${data.course.currentPage === data.course.totalPages ? 'disabled' : ''}>下一页</button>
            </div>
        </div>`;

        document.getElementById("result").innerHTML = html;
    } else {
        document.getElementById("result").innerHTML = `<p>${data.message}</p>`;
    }
}

function fetchPage(page) {
    const courseName = document.getElementById("CourseNameInput").value;
    const perPage = parseInt(document.getElementById("itemsPerPage").value, 10); // 获取选择的条数

    fetch(`/search_course?name=${encodeURIComponent(courseName)}&page=${page}&per_page=${perPage}`)
        .then(response => response.json())
        .then(data => {
            renderCourseData(data); // 渲染数据
            document.getElementById("currentPage").textContent = page; // 更新当前页码
        })
        .catch(error => console.error('Error fetching course data:', error));
}

// 下载按钮逻辑：用于下载完整的查询结果
document.getElementById("downloadResults").addEventListener("click", function () {
    const courseName = document.getElementById("CourseNameInput").value;

    // 构造下载 URL，确保下载所有数据
    const downloadUrl = `/download_csv?name=${encodeURIComponent(courseName)}`;

    // 触发下载
    window.location.href = downloadUrl;
});